<template>
    <div class="product_area">
        <!-- t头部查询 -->
        <div class="header">
            <div class="tab">
                <div class="tab_left">
                    <el-icon>
                        <Search />
                    </el-icon>
                    筛选搜索
                </div>
                <div class="tab_right">
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="Inquire(InquireList)">查询搜索</el-button>
                </div>
            </div>
            <el-form :inline="true" :model="InquireList" class="demo-form-inline">
                <el-form-item label="广告名称">
                    <el-input v-model="InquireList.name" placeholder="广告名称" />
                </el-form-item>
                <el-form-item label="广告位置">
                    <el-select v-model="InquireList.type" placeholder="全部">
                        <el-option label="PC首页轮播" :value=0 />
                        <el-option label="APP首页轮播" :value=1 />
                    </el-select>
                </el-form-item>
                <el-form-item label="到期时间">
                    <el-radio-group v-model="InquireList.endTime" label="请选择时间" size="small">
                    </el-radio-group>
                    <div class="demo-date-picker">
                        <div class="block">
                            <el-date-picker v-model="value1" type="date" placeholder="请选择时间" size="Default" />
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <!-- 添加 -->
        <div class="list">
            <div class="list_left">
                <el-icon>
                    <Tickets />
                </el-icon>
                数据列表
            </div>
            <div class="list_right">
                <el-button v-permission="'addProduct'" @click="Jump">添加广告</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <el-table :data="list" border style="width:100%" ref="multipleTableRef" @select="handleSelectionChange">
            <el-table-column width="59px" align="center" type="selection" />
            <el-table-column width="166px" align="center" prop="id" label="编号" />
            <el-table-column width="166px" align="center" prop="name" label="广告名称" />
            <el-table-column width="166px" align="center" prop="type" label="广告位置">
                <template #default="{ row }">
                    <div>{{ formateString(row.status) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="广告图片">
                <template #default="{ row }">
                    <el-image style=" width: 60px" :src="row.pic" fit="fill" />
                </template>
            </el-table-column>
            <el-table-column width="226px" style="white-space:nowrap" align="center" label="时间">
                <template #default="{ row }">
                    <div style="width: 226px ">开始时间:{{ formateDate(row.startTime) }}</div>
                    <div style="width: 226px;">到期时间:{{ formateDate(row.endTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="上线/下线">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                        @click="changeShowStatus(row.id, row.status)" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="clickCount" label="点击次数" />
            <el-table-column align="center" prop="orderCount" label="生成订单" />
            <el-table-column align="center" label="操作">
                <template #default="{ row }">
                    <el-button-group>
                        <div class="btn">
                            <el-button type="primary" text @click="JumpUpdate(row.id)">编辑</el-button>
                            <el-button type="primary" text @click="deleteList(row.id)"> 删除 </el-button>
                        </div>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="bottomBox">
            <div class="bottomLeft">
                <el-select v-model="type" placeholder="批量操作">
                    <el-option label="删除" :value="0" />
                </el-select>
                <el-button type="primary" @click="determine">确定</el-button>
            </div>
            <div class="page">
                <ElConfigProvider :locale="zhCn">
                    <el-pagination v-model:current-page="page.pageNum" v-model:page-size="page.pageSize"
                        :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                        :total="total" @size-change="AdsList" @current-change="AdsList" />
                </ElConfigProvider>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { getAdsListAPI, deleteAdsListAPI, InquireListAPI, updateStatusAPI } from "./api";
import { ElConfigProvider, ElMessage, ElMessageBox, ElTable } from "element-plus";
import { Search, Tickets } from "@element-plus/icons-vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { reactive, ref } from "vue";
import { formateDate } from "@/utils/index"
import { useRouter } from "vue-router";
import addAdvertise from "./addAdvertise.vue"
import updateAdvertise from "./updateAdvertise.vue"
const router = useRouter()

const value1 = ref('')

const list = ref()

const page = reactive({
    pageNum: 1,
    pageSize: 5
})

const InquireList = ref({
    endTime: "",
    name: '',
    pageNum: 1,
    pageSize: 5,
    type: 0
})

const formateString = (val: number) => {
    if (val === 0) {
        return "PC首页轮播"
    } else {
        return "APP首页轮播"
    }
}

// 重置
const reset = () => {
    InquireList.value.endTime = '',
        InquireList.value.name = '',
        InquireList.value.type = 0
}

// 查询
const Inquire = (InquireList: Inquire) => {
    InquireListAPI(InquireList).then((res) => {
        list.value = res.data.list
        total.value = res.data.total
    })
}

// 跳转添加页面
const Jump = () => {
    router.push("/sms/addAdvertise")
}

// 跳转编辑页面
const JumpUpdate=(id:number)=>{
    router.push(`/sms/updateAdvertise?id=${id}`)
}

// 是否显示状态
const changeShowStatus = (id: number, sort: number) => {
    ElMessageBox.confirm("是否修改上线/下校状态", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        updateStatusAPI(id, sort).then((res) => {
            if (res.code === 200) {
                // 提示
                ElMessage.success("修改成功");
            } else {
                sort = sort === 0 ? 1 : 0;
            }
        })

    })
        .catch(() => {
            ElMessage.success("已取消操作");
            sort = sort === 0 ? 1 : 0;
            AdsList()
        });
};

const total = ref()

// 数据请求
const AdsList = () => {
    getAdsListAPI(page).then((res) => {
        list.value = res.data.list
        total.value = res.data.total
    })
}

// 删除
const deleteList = (id: number) => {
    ElMessageBox.confirm("是否删除该广告", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            deleteAdsListAPI([id]).then((res) => {
                ElMessage({
                    type: "success",
                    message: "删除成功",
                });
                AdsList()
            });
        })
        .catch(() => { });
}

const type = ref();
// 复选框
const checkList = ref<number[]>([]);
// 多选框选中事件
const handleSelectionChange = (val: IBrandList[]) => {
    val.forEach((item) => {
        const p = list.value.find((p: any) => p.id === item.id);
        p && checkList.value.push(item.id as any);
    });
};
// 点击确定
const determine = () => {
    if (checkList.value.length === 0) {
        ElMessage.warning("请选择一条记录");
    } else {
        if (type.value === 0) {
            deleteAdsListAPI(checkList.value).then((res) => {
                if (res.code === 200) {
                    ElMessage.success("修改成功");
                    AdsList()
                } else {
                    ElMessage.success("修改失败请联系管理员");
                }
            });
        }
    }
};

AdsList()
</script>
<style lang="less" scoped>
.product_area {
    .header {
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.03),
            0px 0px 80px rgba(0, 0, 0, 0.06);

        .tab {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .el-form {
            display: grid;
            grid-template-columns: repeat(3, 33%);
            margin-left: 100px;

            .el-input {
                width: 215px;
            }
        }
    }

    .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.03),
            0px 0px 80px rgba(0, 0, 0, 0.06);
        margin-bottom: 20px;
        padding: 20px;
    }

    .btn {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: start;
        width: 60px;

        .el-button {
            margin-left: 0px;
        }
    }

    .pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;

        .el-button {
            margin-left: 20px;
        }
    }

    .bottomBox {
        padding-top: 20px;
        display: flex;
        justify-content: space-between;

        .bottomLeft {
            :deep(.el-button) {
                margin-left: 20px;
            }
        }
    }
}

:deep(.cell) {
    width: 166px;
    white-space: nowrap;
}

.btn span {
    cursor: pointer;
    color: #409eff;
    font-size: 12px;
}

:deep(.el-button-group) {
    display: flex;
    justify-content: space-between;
}

.btn {
    flex-direction: row;
    display: flex;
}
</style>
